/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

//
// This is the main layout definition.
//
Ext.onReady(function(){
	
	Ext.QuickTips.init();

	var detailEl;

    var contentPanel = {
		id: 'content-panel',
		region: 'center', // this is what makes this panel into a region within the containing layout
		layout: 'card',
		margins: '2 5 5 0',
		activeItem: 0,
defaults:{width:'290px'},
		border: false,
		items: [
			// from basic.js:
			start, usuario, cursos, material,metodologia, configuracionCurso, grupoTrabajo

		]
	};
	
	var encabezadoPanel = {
		id: 'encabezado-panel',
		region: 'center', // this is what makes this panel into a region within the containing layout
		//layout: 'card',
		//margins: '2 5 5 0',
		//activeItem: 0,
        split: true,
        height: 300,
        minSize: 150,
        autoScroll: true,
		border: false,
		items: [
			imagenLogo,
menu

		]
	};
                var encabezadoPanelImagen = {
                                id: 'encabezado-panel',
                                region: 'north', // souththis is what makes this panel into a region within the containing layout
                               // layout: 'card',
                                //margins: '2 5 5 0',
                                //activeItem: 0,
    //    split: true,
        height: 100,
        minSize: 150,
        autoScroll: true,
                                border: false,
                                items: [
                                                //barraPrincial
imagenLogo

                                ]
                };


    
	// Go ahead and create the TreePanel now so that we can use it below
    var treePanel = new Ext.tree.TreePanel({
    	id: 'tree-panel',
    	title: 'Perfil Administrador',
        region:'north',
        split: true,
        height: 300,
        minSize: 150,
        autoScroll: true,
        
        // tree-specific configs:
        rootVisible: false,
        lines: false,
        singleExpand: true,
        useArrows: true,
        
        loader: new Ext.tree.TreeLoader({
            dataUrl:'tree-data.json'
        }),
        
        root: new Ext.tree.AsyncTreeNode()
    });
    
	// Assign the changeLayout function to be called on tree node click.
    treePanel.on('click', function(n){
    	var sn = this.selModel.selNode || {}; // selNode is null on initial selection
    	if(n.leaf && n.id != sn.id){  // ignore clicks on folders and currently selected node 
   	//console.log("id"+n.id);
	  Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');
    		if(!detailEl){
    			var bd = Ext.getCmp('details-panel').body;
    			bd.update('').setStyle('background','#fff');
    			detailEl = bd.createChild(); //create default empty div
				//alert("id"+n.id);
    		}
    		detailEl.hide().update(Ext.getDom(n.id+'-details').innerHTML).slideIn('l', {stopFx:true,duration:.2});
			//alert("id"+n.id);
    	}
    });
    
	// This is the Details panel that contains the description for each example layout.
	var detailsPanel = {
		id: 'details-panel',
        title: 'Informaci\xf3n',
        region: 'center',
        bodyStyle: 'padding-bottom:15px;background:#eee;',
		autoScroll: true,
		html: '<p class="details-info">Cuando seleccione alg\xFAn elemento del men&uacute; aqu\xED encontrara informaci&oacute;n.</p>'
    };
	
	// Finally, build the main layout once all the pieces are ready.  This is also a good
	// example of putting together a full-screen BorderLayout within a Viewport.
    new Ext.Viewport({
		layout: 'border',
		//title: 'Ext Layout Browser',
		items: [{
                                  //xtype: 'box',
                                  layout: 'menu',
                                  region: 'north',
                                  //applyTo: 'header',
                                  height: 80,
                                  width: 275,
                                  minSize: 100,
                                  maxSize: 500,
                                  items: [encabezadoPanel, 
                                  ]
		},{
			layout: 'border',
	    	id: 'layout-browser',
	        region:'west',
	        border: false,
	        split:true,
			margins: '2 0 5 5',
	        width: 200,
	        minSize: 100,
	        maxSize: 500,
			items: [treePanel, detailsPanel]
		},
			contentPanel
		],
        renderTo: Ext.getBody()
    });
});
